<template>
  <router-view :key="componentKey" />
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
import { useRouter } from 'vue-router'
const router = useRouter()

const componentKey = ref(0)

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
})

// 监听当前路由
watch(
  () => router.currentRoute.value,
  (newValue) => {
    componentKey.value++
  },
  { immediate: true }
)
</script>

<style lang="scss">
.el-autocomplete {
  width: 100%;
}
.el-form {
  .el-form-item {
    .el-form-item__label {
      font-weight: initial;
    }
  }
}
.el-dialog {
  border-radius: 6px !important;
  overflow: hidden;
  .el-dialog__header {
    background-color: #c8d8f1;
    margin-right: 0;
    .el-dialog__title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
.mainCom {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-input {
  width: 100%;
}
.el-tabs {
  .el-tabs__content {
    overflow: inherit;
  }
}
.flex {
  display: flex;
}
.alignItemsCenter {
  align-items: center;
}
.justifyCenter {
  justify-content: center;
}
.justifyBetween {
  justify-content: space-between;
}
.justifyEnd {
  justify-content: flex-end;
}
ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
}
.bold {
  font-weight: bold;
}
.grids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 12px 12px;
  grid-column-gap: 56rpx; //间隔
}
.columnsLine2 {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}
.columnsLine4 {
  grid-template-columns: repeat(4, minmax(0px, 1fr));
}
</style>
